// 入口函数
$(function () {
    /* 页面功能请求分析：
        1.下拉刷新
            1.1 页面初始化
             a.先构造请求参数  根据url上的参数 key->proName 产品名称

        2.上拉加载下一页
        3.点击商品页面跳转
         */
    //请求参数对象，因为比较多，有写需要有些可不要，所以将参数放到一个对象里面
    var QueryObj = {
        //产品名称
        proName: $.getQueryString("key"),
        //产品品牌
        brandId: "",
        // 使用价格排序（1升序，2降序）
        price: "",
        // 使用库存排序（1升序，2降序）
        num: "",
        //第几页
        page: 1,
        //每页的条数
        pageSize: 4

    };

   
    //总页数k开始默认为1页
    var TotalPage=1;

    init();
   
    function init() {
        mui.init({
            pullRefresh: {
                container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
                down: {
                    height: 40, //可选,默认50.触发下拉刷新拖动距离,
                    auto: true, //可选,默认false.首次加载自动下拉刷新一次
                    contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
                    contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
                    contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
                    //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                    callback: function () {
                        //在触发下拉的时候把当前也页Page重新设置为第一页
                        QueryObj.page=1;
                       //下拉刷新时发送请求渲染
                        queryProduct(function (result) {
                            //将数据渲染到页面上，使用模版引擎，先引用模板引擎，再写模板，再渲染
                            var html=template("goodsTpl",result);
                            $(".lt_products").html(html);
                            // console.log(result);
                            //结束下拉刷新
                            mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
                            //重置组件
                            mui('#refreshContainer').pullRefresh().refresh(true);


                        })

                    }
                },

                up: {
                    height: 40, //可选.默认50.触发上拉加载拖动距离
                    auto: false, //可选,默认false.自动上拉加载一次
                    contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
                    contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
                    callback: function () {
                       //执行加载下一页
                       //判断当前页有没有超过总页数
                       if(QueryObj.page>=TotalPage){
                        //超过的话就不在请求数据
                        //给出用户提示信息
                        //  是否还有更多数据；若还有更多数据，则传入false; 否则传入true，之后滚动条滚动到底时，
                        // 将不再显示“上拉显示更多”的提示语，而显示“没有更多数据了”的提示语；
                           mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
                           return;

                       }else{
                           //继续请求新的数据
                           QueryObj.page++;
                           queryProduct(function (result) {
                               //渲染追加到数据的下面
                               var html=template("goodsTpl",result);
                               $(".lt_products").append(html);
                               //结束上拉加载
                               mui('#refreshContainer').pullRefresh().endPullupToRefresh();
                           })
                       }
                    }
                }


            }
        });
    }

    //二、 点击搜索按钮的时候请求渲染一次
      //获取输入框中的值，改变全局变量商品名proName
       //刷新页面（请求数据，渲染页面）
    $(".search_btn").on("tap",function () {    
        var key = $(".search_txt").val();
        QueryObj.proName=key;    
        // queryProduct(function (result) {
        //     var html = template("goodsTpl", result);
        //     $(".lt_products").html(html);
        //     //结束下拉刷新
        //     mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
        // })
        //简单写法，触发下拉刷新，mui上提供的；
        mui("#refreshContainer").pullRefresh().pulldownLoading();
    })

    //三、点击排序按钮
     //1.切换 箭头方向
     //2.需要点击的是谁，是价格还是数量
     //3.根据箭头的方向来判断是升序还是降序
     //4.触发下拉刷新
    $(".lt_mulu>a").on("tap",function (e) {
        //因为a标签里边装有一个span标签放箭头的，所以就不一定能点击到a标签，所以如果点击箭头的时候让被点击的是其父元素a标签
       var aDom=e.target.nodeName=="A"?e.target:e.target.parentNode;
       //获取需要排序的字段,要先去给a标签一个自定义属性，通过自定义属性获取其被点击的是那个
       var sortName=aDom.dataset.sortname;
       //切换箭头方向
       //find从父元素里面找到里面的子元素
    //    toggleClass()有的话移除没有的话就添加；
       $(aDom).find(".mui-icon").toggleClass("mui-icon-arrowdown mui-icon-arrowup")
       //根据箭头的方向判断是升序还是降序，默认是降序
       var sort=1;
       if ($(aDom).find(".mui-icon").hasClass("mui-icon-arrowdown")){
           sort=2;
       }else{
           sort=1;
       }
       //改变全球查询参数对象：让被点击排序的字段设置属性值降序还是升序
       //对象使用属性的方式有两种 obj.属性， obj[]
       //点击某个字段排序前，需要将之前的数据排序设为空，要不会影响排序
       QueryObj.num = "";
       QueryObj.price = "";
       QueryObj[sortName]=sort;

       //触发下拉刷新
       mui("#refreshContainer").pullRefresh().pulldownLoading();
       
    })


   //重启a标签的跳转功能location.href=e.target.href;
    $(".lt_products").on("tap","a",function (e) {
      
        var aDom = e.target.nodeName == "A" ? e.target : e.target.parentNode.parentNode;
        // console.log(aDom);
    //    var aDom=e.target;    
       location.href=aDom.href;
   
   })

    function queryProduct(callback) {
        $.get("/product/queryProduct", QueryObj, function (result) {
           
            //调用的话并且有传入一个回调函数的话就会执行请求数据，否则就不会执行请求数据
            //回调函数的意思是你自己想写什么样的效果就写什么样的效果的函数，我们这里是要利用返回来的数据渲染页面。
            // console.log(result);
            callback && callback(result);
            //计算总页数
            TotalPage = Math.ceil(result.count / QueryObj.pageSize);


        })
    }
})